<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    img {
      border: none;
      display: block;
    }

    #acc {
      width: 640px;
      height: 140px;

      margin: 0 auto;
    }

    #acc ul {
      border-left: 1px solid #ddd;
      height: 140px;
      position: relative;
    }

    #acc ul li {
      width: 50px;
      height: 138px;
      border: 1px solid #ddd;
      float: left;
      list-style: none;
      border-left: 0;
      position: relative;
      overflow: hidden;
    }

    #acc ul li.active {
      width: 434px;
    }

    #acc ul li h3 {
      font-size: 14px;
      color: #000;
      font-weight: 100;
      width: 14px;
      height: 98px;
      padding: 40px 18px 0;
    }

    #acc ul li h3.active {
      background: #f42760;
      color: #fff;
    }

    #acc ul li div {
      width: 383px;
      height: 138px;
      background: blue;
      position: absolute;
      top: 0;
      left: 50px;
      border-left: 1px solid #ddd;
      z-index: 0;
    }

    #acc ul li img {
      width: 383px;
      height: 138px;
    }

    #acc ul li.last {
      position: absolute;
      top: 0;
      right: 0;
    }
  </style>
  <script src="js/jquery-1.11.3.js"></script>
</head>

<body>
  <div id="acc">
    <ul>
      <li class="active">
        <h3 class="active">红玫瑰</h3>
        <div><img src="img/bg1.jpg" /></div>
      </li>
      <li>
        <h3>白玫瑰</h3>
        <div><img src="img/bg2.jpg" /></div>
      </li>
      <li>
        <h3>白玫瑰</h3>
        <div><img src="img/bg3.jpg" /></div>
      </li>
      <li>
        <h3>白玫瑰</h3>
        <div><img src="img/bg4.jpg" /></div>
      </li>
      <li class="last">
        <h3>白玫瑰</h3>
        <div><img src="img/bg5.jpg" /></div>
      </li>
    </ul>
  </div>
  <script>
    $(function () {
      $("#acc")
        .find("li")
        .click(function () {
          $(this)
            .animate({ width: "434px" }, 500)
            .find("h3")
            .addClass("active")
            .text("红玫瑰")
            .end()
            .siblings()
            .animate({ width: "50px" }, 500)
            .find("h3")
            .removeClass("active")
            .text("白玫瑰")
        })
    })
  </script>
</body>

</html>